<template>
	<el-dialog
		:title="`会员${curData.memberName}的德州俱乐部增值服务消费详情`"
		:visible="visible"
		width="800px"
		class="rempadding"
		:destroy-on-close="true"
		:before-close="handleClose"
		@close="handleClose"
	>
		<el-divider></el-divider>
		<el-row class="contentBox">
			<el-col :span="6">会员账号: {{ curData.memberName }}</el-col>
			<el-col :span="6">上级代理: {{ curData.parentProxyName }}</el-col>
			<el-col :span="6">所属总代: {{ curData.topProxyName }}</el-col>
			<el-col :span="6">
				业务模式:
				{{ mappingBusinessModel(curData.businessModel) }}
			</el-col>
		</el-row>
		<el-table
			v-loading="loading"
			element-loading-spinner="el-icon-loading"
			size="mini"
			class="small-size-table"
			:data="data"
			border
			style="width: 100%; margin: 15px 0"
			:max-height="tableHeight"
			:header-cell-style="getRowClass"
			highlight-current-row
		>
			<el-table-column prop="name" align="center" label="增值消费类型">
				<template slot-scope="scope">
					{{ scope.row.valueAddedName }}
				</template>
			</el-table-column>
			<el-table-column prop="userName" align="center" label="消费金额">
				<template slot-scope="scope">
					<!-- <p :style="handleNumberColor(scope.row.value)">
						{{ handleTotalNumber('USDT', scope.row.value) }}
					</p> -->
					{{ handleTotalNumber('USDT', scope.row.valueAddedAmount) }}
				</template>
			</el-table-column>
		</el-table>
	</el-dialog>
</template>

<script>
import list from '@/mixins/list'
import dayjs from 'dayjs'
export default {
	components: {},
	mixins: [list],
	props: {
		curData: {
			type: Object,
			default: {}
		},
		visible: {
			type: Boolean,
			default: false
		},
		handleVisible: {
			type: Object,
			default: () => {}
		},
		searchTime: {
			type: Array,
			default: () => []
		}
	},
	data() {
		return {
			businessModelData: '',
			loading: false,
			tableHeight: 480,
			num: 0,
			data: []
		}
	},
	mounted() {
		this.getData()
	},
	methods: {
		getData() {
			const timeArr = this.searchTime
			this.$api
				.saveValueAddedList({
					memberId: this.curData.memberId,
					reportEndDate: dayjs(timeArr[1]).format('YYYYMMDD') * 1,
					reportStartDate: dayjs(timeArr[0]).format('YYYYMMDD') * 1
				})
				.then((res) => {
					this.num = 0
					if (res?.code === 200) {
						this.data = res.data || {}
						this.data.forEach((ele) => {
							this.num += Number(ele.valueAddedAmount)
						})
						this.data.push({
							valueAddedName: '总计',
							valueAddedAmount: this.num
						})
					}
				})
		},
		handleClose() {
			this.$emit('update:visible', false)
		}
	}
}
</script>
<style lang="scss" scoped>
.itemBox {
	margin: 0 auto;
	width: 300px;
	border: 1px solid #dedede;
	.item {
		display: flex;
		border-bottom: 1px solid #dedede;
		height: 35px;
		align-items: center;
		padding: 0 20px;
		&:last-child {
			border-bottom: 0;
		}
		div {
			flex: 1;
			width: 100%;
			height: 100%;
			display: flex;
			align-items: center;
			justify-content: center;
		}
	}
	.s1 {
		border-right: 1px solid #dedede;
	}
}
.contentBox {
	margin-bottom: 15px;
}
</style>
